/* Preflights are needed for default values of variables */
@unocss preflights;

.count {
  @apply text-orange-500;
}

.plus1 {
  @apply float-right;
}

.panel {
  border-radius: 5px;
  overflow: hidden;
}

.card {
  min-width: 400px;

  .header {
    padding: 10px;
    border-bottom: 1px solid rgba(221, 221, 221, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
    }

    .ext {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn{
        margin-left: 10px;
      }
    }
  }

  .body {
    font-size: 12px;
    padding: 10px;
  }
}

.btn {
  cursor: pointer;
  background-color: #35618e;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 12px;

  &:hover {
    background-color: #3e79b5;
  }
}

.learnItemDone{
  opacity: .5;
}
.learnItemCurrent{
  color: #3889dc;
}
.learnItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 16px;

  .learnItemTitle {
    font-size: 12px;
  }

  .learnItemExt {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .learnItemExtItem {
      margin-left: 10px;
    }
  }
}

.play{
  cursor: pointer;
}

